import React, { PureComponent } from 'react';
import { Button, Row, Col, Form } from 'antd';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';

import Result from '../../../components/Result';
import styles from './style.less';

@connect(state => ({
  ...state.assetEntity.step,
}))
@Form.create()
export default class Step3 extends PureComponent {
  onFinish = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/asset/add'));
  }

  checkAssetList = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/asset/all'));
  }

  render() {
    console.log(this.props);
    const { step1, step2 } = this.props;

    const assetAttr = (attr) => {
      const arr = [];

      if (typeof attr === 'object') {
        for (const a in attr) {
          if (attr[a]) {
            const curAttr = attr[a];
            arr.push({
              label: a,
              value: curAttr,
            });
          }
        }
      }

      return arr.map((ele) => {
        return (
          <Row key={ele.value}>
            <Col span={6} className={styles.label}>{ele.label}：</Col>
            <Col span={6}>{ele.value}</Col>
          </Row>
        );
      });
    };

    const information = (
      <div className={styles.information}>
        <Row>
          <Col span={6} className={styles.label}>资产名称：</Col>
          <Col span={6}>{step1.asset_name}</Col>
        </Row>
        <Row>
          <Col span={6} className={styles.label}>资产描述：</Col>
          <Col span={6}>{step1.asset_desc}</Col>
        </Row>
        <Row>
          <Col span={6} className={styles.label}>资产位置：</Col>
          <Col span={6}>{step1.location}</Col>
        </Row>
        {assetAttr(step2)}
      </div>
    );

    const actions = (
      <div>
        <Button type="primary" onClick={this.onFinish}>
          继续录入资产
        </Button>
        <Button onClick={this.checkAssetList}>
          查看资产列表
        </Button>
      </div>
    );
    return (
      <Result
        type="success"
        title="操作成功"
        description="已成功录入"
        extra={information}
        actions={actions}
        className={styles.result}
      />
    );
  }
}

